<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>查桩</title>
	    <#assign base=request.contextPath  />
		<link rel="stylesheet" type="text/css" href="${base}/css/demo.css"/>
		<link rel="stylesheet" type="text/css" href="${base}/Yang/layui/css/layui.css"/>
		<link rel="stylesheet" href="${base}/css/common.css" type="text/css" charset="utf-8" />
		<script src="${base}/Yang/layui/layui.all.js"></script>
		<script src="${base}/js/jquery-1.8.2.min.js"></script>
		<script src="${base}/js/demo.js"></script>
		<script src="${base}/js/truck.23648f77.js"></script>
        <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
        <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

        <style type="text/css">
			.top2{
				border-top: 1px solid #585858;
				border-bottom: 2px solid #C6C6C6;
				width: 100%;
				height:45px;
				padding: 0px;
				margin: 0px;
				font-weight: bold;
				text-align: left;
				background-color: white;

			}
			.center{
	            margin-top: 8px;
	            padding-left: 10px;
	            padding-right: 10px;
				border-bottom: 2px solid #F2F2F2;
				border-top: 2px solid #F2F2F2;
				background-color: white;
					
			}
			.o-r{
	            margin-top: 8px;
	            height: 100px;
				text-align: center;	
				line-height: 100px;
				}

				p{
					padding: 3px;
					padding-right:1%;
				}
				.butt button{
					float: left;
					border-radius: 8px;
					font-weight: bold;
					font-size: 14px;
				}
				select{
					width: 100%;
					height: 45px;
					color: #8F8F94;
					border-radius: 6px;
				}
				.content {
					text-align: center;
					padding-top: 44px;
				}
			.meishi22>ul, .grade-eject>ul, .Category-eject>ul, .Sort-eject>ul {
				height: auto;
			}
		</style>
	 </head>

	<body onselectstart="return false;" style="background-color: #F2F2F2;">
		<header id="header">
			<div id="back"  class="nvbt layui-icon layui-icon-refresh-1" onclick="javascript:window.location.reload()" style="font-size: 20px;"></div>
			<div class="nvtt" style="font-size: 20px;">查桩</div>
		</header>
		<div  class="content" style="height: 100%;">
			<div class="top2">
				   <div class="screening" id="cat_date"style="text-align: right">

					        <#--<li class="Regional"style="width: 44%;text-align: left;padding-left: 20px;">位置</li>-->
                                <b class="Sort"><span  style="margin-right: 70px;font-size: 16px;font-weight: bold;" id="cat_date_text">离我最近</span>  <span><i class="layui-icon" style="margin-left:30px;margin-right: 10px">&#xe625;</i></span></b>
                                <button onclick="toMap()" style="height: 48px;width: 19%;font-size: 16px;font-weight: bold;border-top: none;border-bottom: none;border-right: none;" class="layui-btn layui-btn-primary">地图</button>


					 </div>
                <div class="Sort-eject Sort-height">
                    <ul class="Sort-Sort" id="Sort-Sort">

                        <li  class="Sort" onclick="  initChargeList(nextLat,nextLng,'大巴')" >大巴</li>
                        <li class="Sort" onclick="  initChargeList(nextLat,nextLng,'物流车')">物流车</li>
                        <li class="Sort" onclick="  initChargeList(nextLat,nextLng,'私家乘用车')">私家乘用车</li>
                        <li class="Sort" onclick="  initChargeList(nextLat,nextLng,'出租车')">出租车</li>
                        <li class="Sort" onclick="  initChargeList(nextLat,nextLng,null)">其他</li>
                    </ul>
                </div>
				<script src="${base}js/truck.23648f77.js"></script>
				<script>
					$('#Sort-Sort li').click(function () {
						var  cat_text=$(this).html();
						$('#cat_date #cat_date_text').html(cat_text);


                    })
				</script>
				<div class="Category-eject">
				    <ul class="Category-w" id="Categorytw">
				        <li onclick="Categorytw(this)">
				        	仅显示有空闲的站点
				        	<span><div class="wrap" style="margin-top: -16px;">
				              <input type="checkbox" id="s6">
				              <label class="slider-v3" for="s6"></label>
							</div></span>
				        </li>
				        <li onclick="Categorytw(this)">
				        	仅显示对外开放的站点
				        	<span><div class="wrap">
				              <input type="checkbox" id="s7">
				              <label class="slider-v3" for="s7"></label>
							</div></span>
				        </li>
				        <li onclick="Categorytw(this)">
				            <div class="choose" id="dress-size">
				                <form action="" method="get">
				                    <div class="choosebox">
				                        <ul class="clearfix">

				                            <li>
				                                <a style="padding: 4px 0px;border:none;font-size: 16px;" class="size_radioToggle"><span class="value">充电桩类型</span></a>
				                            </li>
				                            <li>
				                                <input type="radio" name="name" value="S" id="" />
				                                <a href="javascript:void(0);" class="size_radioToggle"><span class="value">直流</span></a>
				                            </li>
				                            <li>
				                                <input type="radio" name="name" value="M" id="" />
				                                <a href="javascript:void(0);" class="size_radioToggle"><span class="value">交流</span></a>
				                            </li>
				                        </ul>
				                    </div>
				                    <div style="margin-top: 20px;text-align: right;"><button type="submit" class="btn-img"><span>完成</span></button></div>
				                </form>
				            </div>

				        </li>
				    </ul>
				</div>
				<script type="text/javascript">
				$(function(){
					$('.choosebox li a').click(function(){
						var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
						var checkBox = thisToggle.prev();
						checkBox.trigger('click');
						$('.size_radioToggle').removeClass('current');
						thisToggle.addClass('current');
						return false;
					});
				});

				$(".choosebox li a").click(function(){
					var text = $(this).html();
					$(".choosetext span").html(text);
					$("#result").html("" + getSelectedValue("dress-size"));
				});

				function getSelectedValue(id){
					return
					$("#" + id).find(".choosetext span.value").html();
				}
				</script>
			</div>
			<div id="chargeList">

			</div>



	<script>
        layer.load(2);
		//用于点击地图跳转 传经纬度  这样在地图页面 不需要再重新定位
		var nextLat="";
		var nextLng="";
        var geolocation = new qq.maps.Geolocation("CB3BZ-6UFWS-E3JO7-6YDMB-WEDCJ-ZKFFK", "充电地图开发");
        var positionNum = 0;
        var options = {timeout: 8000};
        geolocation.getLocation(showPosition, showErr, options);
        function showPosition(position) {
            initChargeList(position.lat,position.lng,null)
            nextLat=position.lat;
            nextLng=position.lng;
            layer.closeAll('loading');
        }
        function showErr() {
            layer.closeAll('loading');
            layer.msg("定位失败");
        }


	function 	initChargeList(lat,lng,param){
        layer.load(2);
        $.ajax({
            type:"POST",
            url:"${base}/weStationinfo/findNearbyStation",
			data:{lat:lat,lng:lng,param:param},
            dataType:"json",
            async:false,
            success : function(data){
                $("#chargeList").html("");
				if(data.length<1){
                    $("#chargeList").html("</br><span style='color: #01AAED'>暂无数据...<span>");
				}
				for (var i=0;i<data.length;i++){
                    eachChargeList(data[i]);
				}

            }
        });
        layer.closeAll('loading');
    }
		function eachChargeList(data){

		$("#chargeList").append(	'	<div class="center" onclick="toInfo('+"'"+data.stationID+"'"+','+"'"+data.id+"'"+','+"'"+data.stationLng+"'"+','+"'"+data.stationLat+"'"+','+"'"+data.distance+"'"+') ">'+
           ' <div class="layui-row" style="width: 100%">'+
                    '<span style="float: left;width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left; padding-top: 8px;padding-bottom: 8px;font-size: 16px;font-weight: bold;">'+data.stationName+'</span>'+
                    // '<span style="float: right;padding: 7px 0px;width: 10%">智充</span>'+
                    '<hr/>'+
                    '<div class="layui-col-xs9 layui-col-sm6 layui-col-md7" style="text-align: left;height: 100px;font-size: 13px;border-right: 2px solid #F2F2F2;">'+
                    '<p  style="width:100%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: left;"><span>地址 : </span><span>'+data.address+'</span></p>'+
					'<p id="" >充电桩 : <span>'+data.jl+'个交流，'+data.zl+'个直流</span></p>'+
					'<p id="" style="margin-bottom: 15px">开放时间 : <span>'+data.busineHours+'</span></p>'+
					'</div>'+
					'<div class="layui-col-xs3 layui-col-sm6 layui-col-md5 ">'+
						   ' <a class="o-r">'+
						   data.distance+
					'米</a>'+
					'</div>'+
					'<hr />'+
					'<div class="butt" >'+
                    /*'<button class="layui-btn layui-btn-primary layui-btn-sm" style="color: #78CB95;border: 2px solid #78CB95;">有空闲</button>'+*/
                    '<button class="layui-btn layui-btn-primary layui-btn-sm" style="color: #9AC747;border: 2px solid #9AC747;">支持排队</button>'+
                    '<button class="layui-btn layui-btn-primary layui-btn-sm" style="color: #FFB800;border: 2px solid #FFB800;">对外开放</button>'+
                    '</div>'+
                    '<a style="float: right;padding-bottom: 10px;font-size: 20px;color: #9AC747;"  >导航</a>'+
                    '</div>'+
                    '</div>'+

                    '</div>'+
         '</div>'

		)
        }


       function  toInfo(stationID, id,lat,lng,distance){
			window.location.href="${base}/weStationinfo/chargingInfo.html?id="+id+"&lat="+lat+"&lng="+lng+"&distance="+distance+"&stationID="+stationID;
		}

       function  toMap( ){
           window.location.href='${base}/weStationinfo/map.html'
	   }

	/*	function GPSLocation(lng,lat){
            window.location.href= "http://apis.map.qq.com/uri/v1/marker?marker=coord:${lng},${lat};title:渔虾跳主题餐吧;addr: 城南优品道广场星光广场一楼';  "
		}*/
	</script>
	</body>
</html>